<template>
    <div ref="vantaRef" class="vanta-container"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue';
import WAVES, { VantaEffect } from 'vanta/dist/vanta.waves.min';
import FOG from 'vanta/dist/vanta.fog.min';
import CLOUDS from 'vanta/dist/vanta.clouds.min';
import RINGS from 'vanta/dist/vanta.rings.min';
import BIRDS from 'vanta/dist/vanta.birds.min';
import CELLS from 'vanta/dist/vanta.cells.min';
import CLOUDS2 from 'vanta/dist/vanta.clouds2.min';
import DOTS from 'vanta/dist/vanta.dots.min';
import GLOBE from 'vanta/dist/vanta.globe.min';
import HALO from 'vanta/dist/vanta.halo.min';
import NET from 'vanta/dist/vanta.net.min';
import RIPPLE from 'vanta/dist/vanta.ripple.min';
import TOPOLOGY from 'vanta/dist/vanta.topology.min';
import TRUNK from 'vanta/dist/vanta.trunk.min';

const vantaRef = ref<HTMLElement | null>(null);
type VantaEffect = any;

let vantaEffect: VantaEffect | null = null;
const props = defineProps<{
  effect: string;
  enabled?: boolean;
}>();
// 不再接收通用颜色属性，改为在特效设置中设置颜色

const commonConfig = {
    el: vantaRef.value,
    mouseControls: true,
    touchControls: true,
    gyroControls: false,
    minHeight: 200.00,
    minWidth: 200.00,
    scale: 1.00,
    scaleMobile: 1.00,
    // 移除通用背景颜色设置，改为在特效设置中设置
};

// 特定效果配置
const effectConfigs: any = {
    waves: {
      shininess: 36.00,
      waveHeight: 23.50,
      waveSpeed: 0.50,
      zoom: 0.78,
      color: 0x245282, // 默认颜色
    },
    fog: {
      highlightColor: 0xffc300,
      midtoneColor: 0xff1f00,
      lowlightColor: 0x2d00ff,
      baseColor: 0x245282, // 默认颜色
      blur: 0.60,
      zoom: 0.78,
      speed: 0.20,
      density: 0.8,
      factor: 0.6
    },
    trunk: {
      backgroundColor: 0x222426,
      color: 0x245282, // 默认颜色
      spacing: 0,
      chaos: 1,
    },
    birds: {
      backgroundColor: 0x1b1b1b,
      color: 0x245282, // 默认颜色
    },
    cells: {
      color1: 0xffffff,
      color2: 0x000000,
      color: 0x245282, // 默认颜色
    },
    clouds: {
      backgroundColor: 0x1a3590,
      skyColor: 0x68b8d7,
      cloudColor: 0xadc1de,
      cloudShadowColor: 0x183550,
      color: 0x245282, // 默认颜色
    },
    clouds2: {
      backgroundColor: 0x1a3590,
      skyColor: 0x64b5f6,
      cloudColor: 0xffffff,
      color: 0x245282, // 默认颜色
    },
    dots: {
      backgroundColor: 0x23153c,
      color: 0x245282, // 默认颜色
    },
    globe: {
      backgroundColor: 0x23153c,
      color: 0x245282, // 默认颜色
    },
    halo: {
      backgroundColor: 0x000000,
      color: 0x245282, // 默认颜色
    },
    net: {
      backgroundColor: 0x23153c,
      color: 0x245282, // 默认颜色
    },
    rings: {
      backgroundColor: 0x1a3590,
      color: 0x245282, // 默认颜色
    },
    ripple: {
      color1: 0xffffff,
      color2: 0x000000,
      backgroundColor: 0x000000,
      color: 0x245282, // 默认颜色
    },
    topology: {
      backgroundColor: 0x000000,
      color: 0x245282, // 默认颜色
    }
    // 其他效果的特定配置
};

const initVanta = () => {
  if (vantaEffect && vantaRef.value) {
    try {
      vantaEffect.destroy();
    } catch (error) {
      console.error('销毁 Vanta 效果时出错:', error);
    }
    vantaEffect = null;
  }

  // 如果特效被禁用，则不初始化
  if (props.enabled === false) {
    return;
  }

  if (vantaRef.value) {
    // 从 localStorage 加载效果设置
    let effectConfig = {};
    try {
      const savedEffectSettings = localStorage.getItem('vantaEffectSettings');
      if (savedEffectSettings) {
        const parsedSettings = JSON.parse(savedEffectSettings);
        // 获取当前效果的设置
        if (parsedSettings[props.effect]) {
          effectConfig = parsedSettings[props.effect];
        }
      }

      // 从 localStorage 加载通用设置
      let commonSettingsConfig = {};
      const savedCommonSettings = localStorage.getItem('vantaCommonSettings');
      if (savedCommonSettings) {
        commonSettingsConfig = JSON.parse(savedCommonSettings);
      }

      const config = {
        ...commonConfig,
        ...commonSettingsConfig,
        el: vantaRef.value,
        // 不再在这里设置通用颜色，而是使用特效配置中的颜色
        ...effectConfigs[props.effect] || {},
        ...effectConfig
      };

      switch (props.effect) {
        case 'waves':
          vantaEffect = WAVES(config);
          break;
        // 可添加更多 Vanta 效果
        case 'fog':
          vantaEffect = FOG(config);
          break;
        case 'clouds':
          vantaEffect = CLOUDS(config);
          break;
        case 'rings':
          vantaEffect = RINGS(config);
          break;
        case 'birds':
          vantaEffect = BIRDS(config);
          break;
        case 'cells':
          vantaEffect = CELLS(config);
          break;
        case 'clouds2':
          vantaEffect = CLOUDS2(config);
          break;
        case 'dots':
          vantaEffect = DOTS(config);
          break;
        case 'globe':
          vantaEffect = GLOBE(config);
          break;
        case 'halo':
          vantaEffect = HALO(config);
          break;
        case 'net':
          vantaEffect = NET(config);
          break;
        case 'ripple':
          vantaEffect = RIPPLE(config);
          break;
        case 'topology':
          vantaEffect = TOPOLOGY(config);
          break;
        case 'trunk':
          vantaEffect = TRUNK(config);
          break;
        default:
          vantaEffect = WAVES(config);
      }
    } catch (error) {
      console.error('初始化 Vanta 效果时出错:', error);
      // 使用默认配置初始化
      const defaultConfig = {
        ...commonConfig,
        el: vantaRef.value,
        // 不再使用通用颜色设置，而是使用特效配置中的颜色
        ...effectConfigs[props.effect] || {}
      };
      // 尝试使用默认配置初始化
      try {
        vantaEffect = WAVES(defaultConfig);
      } catch (e) {
        console.error('使用默认配置初始化 Vanta 效果失败:', e);
      }
    }
  }
};

onMounted(() => {
  initVanta();
});

onUnmounted(() => {
  try {
    if (vantaEffect) {
      vantaEffect.destroy();
      vantaEffect = null;
    }
  } catch (error) {
    console.error('Error destroying Vanta effect:', error);
  }
});

watch(() => props.effect, () => {
  initVanta();
});

watch(() => props.enabled, () => {
  initVanta();
});

defineExpose({ setColor: initVanta });
</script>

<style scoped>
.vanta-container {
    width: 100%;
    height: 100vh; /* 占据整个视口的高度 */
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}
</style>